<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.bgWhite{
		background: #FFFFFF;
	}
	.content{
		.head-bg{
			width: 100%;
			height: 70rpx;
		}
		.top-head{
			height: 458rpx;
			background-image: url('~@/static/icons/agent_jewel/bg.jpg');
			background-repeat: no-repeat;
			background-position: top left;
			background-size: 100% 100%;
			.level-icon{
				position: relative;
				top: -46rpx;
				.icon{
					width: 126rpx;
					height: 119rpx;
					display: block;
					margin: 0 auto;
				}
				
				.text{
					position: absolute;
					bottom: -30rpx;
					left: 50%;
					transform: translate(-50%,0);
					font-size: 32rpx;
					height: 44rpx;
					line-height: 44rpx;
					background: #FFFFFF;
					padding: 0 20rpx;
					color: #dadada;
					&.gay{
						color: #dadada;
					}
					&.pink{
						color: #f98eca;
					}
					&.red{
						color: #fb4646;
					}
					&.yellow{
						color: #edc21c;
					}
					&.organe{
						color: #f5b833;
					}
				}
			}
			.sells-num{
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				margin-top: 10rpx;
			}
			.allowance-num{
				justify-content: center;
				text{
					color: #934106;
					font-size: 28rpx;
					display: block;
					background: #f9b380;
					line-height: 58rpx;
					padding: 0 30rpx;
					border-radius: 50rpx;
				}
			}
			.tips-text{
				color: #FFFFFF;
				font-size: 28rpx;
				text-align: center;
				padding-top: 15rpx;
			}
		}
		.getlist{
			padding: 0 25rpx;
			margin-top: 20rpx;
			.title{
				justify-content: space-between;
				line-height: 90rpx;
				.left{
					color: #363636;
					font-size: 34rpx;
					padding-left: 16rpx;
				}
				.right{
					color: #7f7f7f;
					font-size: 30rpx;
				}
			}
			.list{
				.li{
					justify-content: space-between;
					border-top: 1px solid #e6e6e6;
					line-height: 94rpx;
					image{
						width: 46rpx;
						height: 43rpx;
						margin: 0 10rpx;
					}
					.name{
						color: #343434;
						font-size: 30rpx;
					}
					.money{
						color: #686868;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.progress-line{
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		.info{
			display: flex;
			justify-content: space-between;
			justify-content: center;
			position: relative;
			z-index: 1;
			width: 96%;
			margin: 0 auto;
			.item{
				text-align: center;
				width: 20%;
				flex: 1;
				position: relative;
				z-index: 10;
				.icon{
					position: relative;
					z-index: 2;
					width: 23rpx;
					height: 23rpx;
					margin: 0 auto;
					.point{
						background: #f48081;
						width: 23rpx;
						height: 23rpx;
						border-radius: 50%;
					}
				}
				.name{
					color: #FFFFFF;
					font-size: 26rpx;
					padding-top: 20rpx;
				}
				&.on{
					.point{
						background: #f9b380;
					}
					.icon:after{
						content: '';
						position: absolute;
						right: 0rpx;
						top: 10rpx;
						width: 145rpx;
						height: 5rpx;
						background: #f9b380;
						z-index: -10;
					}
				}
				&.on:nth-child(1){
					.icon:after{
						height: 0rpx;
					}
				} 
			}
			&:after{
				content: '';
				position: absolute;
				top: 10rpx;
				left: 50%;
				transform: translate(-50%,0);
				width: 585rpx;
				height: 5rpx;
				background: rgba(244,128,129,0.38);
				z-index: -1;
			}
		}
	}
	
</style>

<template>
	<view>
		<view class="content">
			<view class="head-bg bgWhite"></view>
			<view class="top-head">
				<view class="level-icon"><image :src="onLevel.thumb_text" class="icon"></image><view class="text" :class="[onLevel.color]" v-if="onLevel.name">{{onLevel.name}}</view></view>
				<navigator open-type="navigate" url="/pages/jewel/agent_jewel/profit_list" hover-class="none" class="sells-num">本月业绩：{{makerInfo.performance||0}}</navigator>
				<uni-steps :agentOptions="levelList" stepType="agentJewel" :agentActive="makerInfo.type"></uni-steps>
				<navigator open-type="navigate" url="/pages/jewel/agent_jewel/allowance_list" class="allowance-num flex" hover-class="none"><text>代言得米：{{makerInfo.deal_money||0}}</text></navigator>
				<view class="tips-text" v-if="makerInfo.chae != 0">还差{{makerInfo.chae||0}}到下一个等级</view>
			</view>
			<view class="getlist bgWhite">
				<view class="title flex"><text class="left">创客等级</text></view>
				<view class="list">
					<view class="li flex" v-for="(item,index) in levelList" :key="index">
						<view class="flex"><image :src="item.thumb_text"></image><text class="name">{{item.name}}</text></view>
						<view class="money">{{item.level}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="showLoading">
		    <image src="../../../static/images/loading.gif"></image>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	export default {
		data() {
			return {
				showLoading: false,
				levelList:[],
				active:true,
				makerInfo:{},
				onLevel:{
					thumb_text:'',
					name:''
				}
			};
		},
        methods: {
			getData(){
				let that = this;
				that.showLoading = true;
				henglang.get('maker/maker_type',{},true,function(res){
					if(res.data.code == 0){
						that.levelList = res.data.data
						henglang.get('maker/maker_info', {}, true, function (res){
							if(res.data.code == 0){
								that.showLoading = false;
								that.makerInfo = res.data.data
								for(let i in that.levelList){
									if(that.levelList[i].id == that.makerInfo.type){
										that.onLevel = that.levelList[i]
									}
								}
							}
						})
					}
					
				});
			}
        },
        onLoad() {
			this.getData();
        },
		onPullDownRefresh (){
			this.getData();
			uni.stopPullDownRefresh();
		}
	}
</script>

